<?php
/**
 * Created by PhpStorm.
 * User: Sky
 * Date: 16/1/25
 * Time: 下午5:50
 */

use yii\helpers\Html;
use yii\helpers\Url;
use app\lib\WeixinUtils;

/* @var $this yii\web\View */
/* @var $content string 字符串 */


$web = Url::to("@web");
//获取微信js
$sign= WeixinUtils::getJs_SignPackage();
?>

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>领取礼卡</title>
    <link href="<?= $web ?>/css/global.css" rel="stylesheet"/>
    <link href="<?= $web ?>/css/h5/gift-receive.css" rel="stylesheet"/>
    <link href="<?= $web ?>/css/wx/gift-receive.css" rel="stylesheet"/>
    <script src="<?= $web ?>/js/jquery.js"></script>
    <script src="<?= $web ?>/js/tools.js"></script>
    <script src="<?= $web ?>/js/wx/wx_utils.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
    <meta charset="utf-8"/>

    <script type="text/javascript">
        $(document).ready(function () {
            var w = $(window).width();
            if (w > 640) {
                w = 640;
            }
            $("body").css("font-size", w * 20 / 320);

        })
        list_tpl = returnstring("<?=$web?>/js/wx/gift-receive-list.tpl");
        info_tpl = returnstring("<?=$web?>/js/wx/gift-receive-info.tpl");
        function getGiftReceive_info_ini() {
            var data = {};
            data.order_code = '<?= $order_code?>';

            var re = returnjson("<?=Url::to(['wx-biz/get-gift-receive-info-handle'])?>", data);
            if (re.flag == 0) {
                alert(re.msg);
                return;
            } else {
                //填充数据
                $(".btn-receive").hide();

                //判断状态
                if(re.isReceive==1){
                    //已经领取
                    $(".get-main-frame").hide();
                    $(".main").show();
                    $(".btn-receive").show();

                    loaddata(re);
                    return;
                }

                $(".get-main-frame").show();
                $(".main").hide();
                var shengyu=re.count-re.getcount;

                if(shengyu>0){
                    //领取页面

                    showGetBox();
                }else{
                    //自己没领取--领完了
                    showNoGift();
                }

            }
        }

        function getGiftReceive_info() {
            var data = {};
            data.order_code = '<?= $order_code?>';

            var re = returnjson("<?=Url::to(['wx-biz/get-gift-receive-info-handle'])?>", data);
            if (re.flag == 0) {
                alert(re.msg);
                return;
            } else {
                //填充数据
                $(".btn-receive").hide();
                if(re.isReceive==1){
                    //已经领取
                    $(".btn-receive").show();

                }
                $(".get-main-frame").hide();
                $(".main").show();
                loaddata(re);


            }
        }
        function ShowReceiveDialog() {
            $("#gift_receive").show();
        }

        function CloseReceiveDialog() {
            $("#gift_receive").hide();
            getGiftReceive_info();
        }

        function ShowHasReceivedDialog() {
//            document.getElementById("MyDiv1").style.display = 'block';
//            document.getElementById("fade1").style.display = 'block';
            $("#gift_has_received").show();
        }

        function CloseHasReceivedDialog() {
//            document.getElementById("MyDiv1").style.display = 'none';
//            document.getElementById("fade1").style.display = 'none';
            $("#gift_has_received").hide();
        }

        function ShowNoGift() {
            $("#no_gift").show();
        }

        function CloseNoGift() {
            $("#no_gift").hide();
            getGiftReceive_info();
        }

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: '<?=APPID?>', // 必填，公众号的唯一标识
            timestamp:<?=$sign['timestamp']?> , // 必填，生成签名的时间戳
            nonceStr: '<?=$sign['nonceStr']?>', // 必填，生成签名的随机串
            signature: '<?=$sign['signature']?>',// 必填，签名，见附录1
            jsApiList: jsApiList_order_share // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
        wx.ready(function(){
            var orderid=$("#hidden_orderid").val();
            var url='<?=Url::to(["wx-biz/gift-receive"],true)?>'+"?id="+orderid;

            wx_setShare({
                title: '<?=$user['NICK_NAME']?>送你朵拉礼卡', // 分享标题
                desc: '点击兑换朵拉盒好礼！朵拉超越你的想象，精彩好礼随心兑换！送心意、送逼格！送礼就选朵拉盒 ', // 分享描述+orderid
                link: url
            });
        });
        function linkGoodsChose() {

            window.location.href="<?=Url::to(["wx-biz/good-chose"]);?>?id="+card_code_id;
        }
        var card_code_id='';
        //防止点两次领取
        var canRun=true;
        function GiftReceive_Exec() {
            if(canRun==false){
                return;
            }
            canRun=false;
            var data = {};
            data.orderid = $("#hidden_orderid").val();
            var re = returnjson("<?=Url::to(["wx-biz/get-card-handle"])?>", data);
            if (re.flag == 1) {
                card_code_id= re.card_code_id;
                ShowReceiveDialog();

            } else {
//                alert(re.msg);
                ShowNoGift();
            }
        }
        function loaddata(re){
            card_code_id= re.card_code_id;
            var list_dom=$('.lists');
            var html='';
            $.each(re.rCards,function(i,item){
                html=html+list_tpl._format({
                        HEADER_URL:item.HEADER_URL,
                        NICK_NAME:item.NICK_NAME,
                        CREATE_DATETIME:item.CREATE_DATETIME

                    });
            });
            list_dom.html(html);
            info_dom=$('.duora-info');
            html=info_tpl._format({
                s_count:re.count,
                receive_count:re.getcount,
                yu:re.count-re.getcount
            });
            info_dom.html(html);
        }

        //h5
        $(document).ready(function () {
            $(".get-main-frame").height($(document).height());

            var w = $(window).width();
            if (w > 640) {
            }
            $("body").css("font-size", w * 20 / 320);
            getGiftReceive_info_ini();

        });

        function showGetBox() {

            $(".get-main-frame .box-frame").addClass("box-frame-anim").show();

            $(".get-main-frame .box-frame").click(function () {
//
                GiftReceive_Exec();
                $(".get-main-frame .box-frame").removeClass("box-frame-anim");
                $(".get-main-frame .box-frame .box-lid").addClass("box-lid-open-anim");
                $(".get-main-frame .box-frame .boom").addClass("boom-anim");
                $(".get-main-frame .box-frame .box-body").addClass("hide-anim");
//                $("#bubble_frame").addClass("hide-anim");
//                $(".get-main-frame .header").addClass("hide-anim");
//                $(".get-main-frame .name").addClass("hide-anim");
//                $(".get-main-frame .blessing").addClass("hide-anim");
//                $(".get-main-frame .bg").addClass("hide-anim");

                $(".get-main-frame").addClass("get-main-frame-hide-anim");

                setTimeout(hideGetFrame, 1500);
            });
        }

        function showNoGift() {
            $(".get-main-frame .no-gift-frame").show();
            $(".get-main-frame .no-gift-frame").click(function () {
                hideGetFrame();
                $(".main").show();
                getGiftReceive_info();
            });
        }

        function hideGetFrame() {
            $(".get-main-frame").hide();
        }
    </script>
</head>
<body>
<input type="hidden" id="hidden_orderid" value="<?= $order_code ?>"/>

<div class="get-main-frame" style="display: none;">
    <div class="bg"></div>
    <div class="content">
        <div id="bubble_frame">
            <div class="bg-bubble" style="top:3em; left: 1.5em;"></div>
            <div class="bg-bubble" style="top:1.5em; left: 4.3em;"></div>
            <div class="bg-bubble" style="top:5em; left: 5em;"></div>
            <div class="bg-bubble" style="top:3.5em; left: 8em;"></div>
            <div class="bg-bubble" style="top:3em; left: 11.5em;"></div>
            <div class="bg-bubble" style="top:5.5em; left: 8.8em;"></div>
        </div>
        <div class="header"><img  src="<?= $user['HEADER_URL'] ?>"></div>
        <div class="name"><label><?= $user['NICK_NAME'] ?></label></div>
        <div class="blessing"><label></label></div>
    </div>
    <div class="box-frame">
        <img class="box-lid" src="<?= $web ?>/img/h5/gift-receive/get-box-lid.png">
        <img class="box-body" src="<?= $web ?>/img/h5/gift-receive/get-box-body.png">
        <img class="boom" src="<?= $web ?>/img/h5/gift-receive/get-box-boom.png">
    </div>
    <div class="no-gift-frame">
        <label>您手慢了,礼品被抢完了,下次快点!</label><br>
        <label>查看礼品都被谁给抢了....</label>
    </div>
</div>


<div class="main" style="display: none;">
    <div class="gift-container">
        <div class="title-container"
             style="background-image: url(<?= $web ?>/img/wx/gift-receive/title-bg-normal.png);">
            <div class="title-content">
                <div class="logo" style="background-image: url(<?= $web ?>/img/wx/gift-receive/rectangle.png);"></div>
                <div class="logo-text"
                     style="background-image: url(<?= $web ?>/img/wx/gift-receive/rectangle1.png);"></div>
                <div class="title">
                    <table cellspacing="0" cellpadding="0">
                        <tr>
                            <td id="title-main"><?= $card['NAME'] ?></td>
                        </tr>
                        <tr>
                            <td id="title-desc">有效期：<?= $card['VALID_DATE_MESSAGE'] ?></td>
                        </tr>
                    </table>
                </div>
            </div>
            <div class="bless-container">
                <div class="user-head">
                    <img src="<?= $user['HEADER_URL'] ?>"/>
                </div>
                <div class="user-bless">
                    <table cellpadding="0" cellspacing="0">
                        <tr>
                            <td id="user-target"><?= $user['NICK_NAME'] ?>：</td>
                        </tr>
                        <tr>
                            <td id="bless-text"><?= $orderInfo['BLESSING'] ?></td>
                        </tr>
                    </table>
                </div>
            </div>

            <div class="duora-info">

            </div>
        </div>
    </div>
    <div class="btn-receive" onclick="linkGoodsChose()">立即兑换</div>
    <div class="lists">

    </div>
</div>

<div id="gift_receive" style="position: fixed; top: 0; width: 100%; height: 100%; background-color: #c93f3c; overflow: auto; display: none;">
    <img class="delete" onclick="CloseReceiveDialog()"
         src="<?= $web ?>/img/bag/gift-receives/delete.png"
         style="width:0.8em; height:0.8em; position:absolute; top: 0.5em; right: 0.5em;"/>
    <img src="<?= $web ?>/img/bag/gift-receives/receive-top.png" style="width: 16em; height: 5.5em; display: block; vertical-align: bottom;">
    <img src="<?= $web ?>/img/bag/gift-receives/receive-qr.png" style="width: 16em; height: 14.5em; display: block; vertical-align: bottom;">
    <div>
        <div>
            <div class="new_bg_1_text" style="top: 0; left: -2em; width: 18em; color:#ffffff; text-align: left;"><?= $card['NAME'] ?></div>
            <div onclick="linkGoodsChose();"
                 style="background-color: #ab3633; width: 3.4em; border-radius: 0.6em; margin-left: 2em; margin-top: 0.4em; height: 1.2em; line-height: 1em; text-align: center; color:#ffffff;"><label style="color:#ffffff; font-size: 0.6em;">立即兑换</label></div>
        </div>
    </div>
    <div style="color:#f1aa60; float:left; margin-left: 1em; margin-top: 0.5em; width: 15em; line-height: 0.5em;"><label style="font-size: 0.5em;"> 赠送人已付款，您只需要点击“立即兑换”填好收货地址就可以领礼品</label></div>
</div>

<div id="gift_has_received" style="position: fixed; top: 0; width: 100%; height: 100%; background-color: #c93f3c; overflow: auto; display: none;">
    <img class="delete" onclick="CloseHasReceivedDialog()"
         src="<?= $web ?>/img/bag/gift-receives/delete.png"
         style="width:0.8em; height:0.8em; position:absolute; top: 0.5em; right: 0.5em;"/>
    <img src="<?= $web ?>/img/bag/gift-receives/received-bg.png" style="width: 16em; height: 21em; display: block; vertical-align: bottom;">
</div>

<div id="no_gift" style="position: fixed; top: 0; width: 100%; height: 100%; display: none;">
    <div style="width: 100%; height: 100%; background-color: #000000; opacity: 0.5; position: absolute; top: 0;"></div>
    <div style="width: 100%; height: 100%; position: absolute; top: 0;">
        <img class="delete" onclick="CloseNoGift()"
             src="<?= $web ?>/img/bag/gift-receives/delete.png"
             style="width:1.1em; height:1.1em; position:absolute; top: 1em; right: 1em;"/>
        <img src="<?= $web ?>/img/bag/gift-receives/no-gift.png"
             style="width: 13.5em; height: 11.5em; background-size: cover; position: absolute; left: 1.25em; top:5em;">
    </div>
</div>

<div id="fade" class="black_overlay"></div>
<div id="MyDiv" class="white_content">
    <div style="text-align: right; cursor: default; height:auto;">
        <div style="font-size: 16px;" onclick="CloseReceiveDialog()">
            <img class="delete" src="<?= $web ?>/img/wx/gift-receive/delete.png"
                 style="width:1.1em; height:1.1em; position:relative; left:-1em;"/>
        </div>
        <div class="new_top" style="background-image:url(<?= $web ?>/img/wx/gift-receive/new_top.png);"></div>
        <div class="new_bg" style="background-image:url(<?= $web ?>/img/wx/gift-receive/new_bg.png);">
            <div class="tocode" style="width:4.5em; height:4.5em; padding-top:0.8em; margin-left:2.1em;">
                <img class="new_bg_img" style="border-radius: 0.2em;" src="<?= $web ?>/img/qrcode_for_gh_3f08cea520b4_430.jpg" width="100%"/>
            </div>
        </div>
        <div class="new_bg_1" style="background-image:url(<?= $web ?>/img/wx/gift-receive/new_bg_1.png);">
            <div class="new_bg_1_text">
                <?= $card['NAME'] ?>
            </div>
        </div>
        <div class="new_bg_down" style="background-image:url(<?= $web ?>/img/wx/gift-receive/new_down.png);"></div>
        <div class="new_bg_down_but"
             style="background-image:url(<?= $web ?>/img/wx/gift-receive/new_down_but.png);"
             onclick="linkGoodsChose()"></div>
    </div>
</div>

<div id="fade1" class="black_overlay"></div>
<div id="MyDiv1" class="white_content">
    <div class="b" style="text-align: right; cursor: default; height:auto; margin-top:3.3em;">
        <div style="font-size: 16px;" onclick="CloseHasReceivedDialog()">
            <img class="delete" src="<?= $web ?>/img/wx/gift-receive/delete.png"
                 style="width:1.1em; height:1.1em; position:relative; left:-1em;"/>
        </div>
        <div class="new_top1" style="background-image: url(<?= $web ?>/img/wx/gift-receive/new_top_text.png);"></div>
        <div class="new_bg" style="background-image: url(<?= $web ?>/img/wx/gift-receive/new_bg.png);">
            <div class="tocode" style="width:4.5em; height:4.5em; padding-top:0.8em; margin-left:2.1em;">
                <img class="new_bg_img" style="border-radius: 0.2em;" src="<?= $web ?>/img/qrcode_for_gh_3f08cea520b4_430.jpg" width="100%"/>
            </div>
        </div>
    </div>
</div>
</body>
</html>

